<template>
  <div class="contentBg">
    <div class="headerBg">
      <p class="title">智慧机房监控系统云平台</p>
    </div>
    <div>
      <a-row>
        <a-col :span="6" style="margin-top: -40px">
          <div>
            <a-card class="card" title="任务总览">
              <div style="place-items: center;display: grid">
                <e-chart
                  id="left1"
                  :options="left1Options"
                  style="margin-top: -30px;text-align: center"
                  width="80%"
                  height="300px" />
              </div>
              <div style="margin-top: -50px">
                <a-row class="rowStyle">
                  <a-col :span="8" style="text-align: center">
                    <span style="color:#59d8ff;font-size: 20px">任务总数</span>
                    <br />
                    <span style="color:#cfdd30;font-size: 20px">{{ taskCnt.sum }}</span>
                    <span style="color:white;font-size: 12px">个</span>
                  </a-col>
                  <a-col :span="8" style="text-align: center">
                    <span style="color:#59d8ff;font-size: 20px">运行中</span>
                    <br />
                    <span style="color:#cfdd30;font-size: 20px">{{ taskCnt.run }}</span>
                    <span style="color:white;font-size: 12px">个</span>
                  </a-col>
                  <a-col :span="8" style="text-align: center">
                    <span style="color:#59d8ff;font-size: 20px">已停止</span>
                    <br />
                    <span style="color:#cfdd30;font-size: 20px">{{ taskCnt.stop }}</span>
                    <span style="color:white;font-size: 12px">个</span>
                  </a-col>
                </a-row>
              </div>
            </a-card>
          </div>
          <div style="margin-top: 10px">
            <a-card class="card" title="告警分布(周)">
              <div style="place-items: center;display: grid">
                <e-chart
                  id="left2"
                  :options="left2Options"
                  style="margin: -30px 0;text-align: center"
                  width="100%"
                  height="220px" />
              </div>
            </a-card>
          </div>
          <div style="margin-top: 10px">
            <a-card class="card" title="告警排行(周)">
              <div style="place-items: center;display: grid">
                <e-chart
                  id="left3"
                  :options="left3Options"
                  style="padding: 0;text-align: center"
                  width="100%"
                  height="165px" />
              </div>
            </a-card>
          </div>
        </a-col>
        <a-col :span="12">
          <div style="padding: 10px">
            <a-row :gutter="10">
              <a-col :span="6">
                <a-card class="outCard">
                  <a-card class="miniCard" title="设备总数">
                    <div class="split"></div>
                    <div>
                      <span style="color:#cfdd30;font-size: 20px">{{ deviceCnt }}</span>
                      <span style="color:white;font-size: 12px">个</span>
                    </div>
                  </a-card>
                </a-card>
              </a-col>
              <a-col :span="6">
                <a-card class="outCard">
                  <a-card class="miniCard" title="告警总数">
                    <div class="split"></div>
                    <div>
                      <span style="color:#cfdd30;font-size: 20px">{{ warnCnt }}</span>
                      <span style="color:white;font-size: 12px">个</span>
                    </div>
                  </a-card>
                </a-card>
              </a-col>
              <a-col :span="6">
                <a-card class="outCard">
                  <a-card class="miniCard" title="已处理数">
                    <div class="split"></div>
                    <div>
                      <span style="color:#cfdd30;font-size: 20px">{{ detailCnt }}</span>
                      <span style="color:white;font-size: 12px">个</span>
                    </div>
                  </a-card>
                </a-card>
              </a-col>
              <a-col :span="6">
                <a-card class="outCard">
                  <a-card class="miniCard" title="待处理数">
                    <div class="split"></div>
                    <div>
                      <span style="color:#cfdd30;font-size: 20px">{{ notDetailCnt }}</span>
                      <span style="color:white;font-size: 12px">个</span>
                    </div>
                  </a-card>
                </a-card>
              </a-col>
            </a-row>
          </div>
          <div style="text-align: center">
            <img src="@/assets/images/map.png" />
          </div>
          <div style="margin: 10px">
            <a-card class="midDownCard">
              <div style="place-items: center;display: grid;margin-top: -50px">
                <a-card class="titleCard">
                  最新告警信息
                </a-card>
              </div>
              <div style="margin-top: 20px">
                <a-carousel :autoplay="true" :active.sync="currentIndex">
                  <div>
                    <a-table :columns="columns" :data-source="data" :pagination="false" class="custom-table">
                      <a slot="name" slot-scope="text">{{ text }}</a>
                    </a-table>
                  </div>
                  <div>
                    <a-table :columns="columns" :data-source="data" :pagination="false" class="custom-table">
                      <a slot="name" slot-scope="text">{{ text }}</a>
                    </a-table>
                  </div>
                  <div>
                    <a-table :columns="columns" :data-source="data" :pagination="false" class="custom-table">
                      <a slot="name" slot-scope="text">{{ text }}</a>
                    </a-table>
                  </div>
                </a-carousel>
              </div>
            </a-card>
          </div>
        </a-col>
        <a-col :span="6" style="margin-top: -50px;padding-right: 10px;margin-left: -10px">
          <div style="margin-left: 20px">
            <a-row :gutter="10">
              <a-col :span="16">
                <a-card class="timeCard">{{ time }}</a-card>
              </a-col>
              <a-col :span="8">
                <a-button class="custom-button" @click="redirectToHome">返回</a-button>
              </a-col>
            </a-row>
          </div>
          <div style="margin-top: 10px">
            <a-card class="card" title="告警统计">
              <div style="place-items: center;display: grid">
                <e-chart
                  id="right1"
                  :options="right1Options"
                  style="margin: -30px 0;text-align: center"
                  width="100%"
                  height="220px" />
              </div>
            </a-card>
          </div>
          <div style="margin-top: 10px">
            <a-card class="card" title="告警分析">
              <div style="place-items: center;display: grid">
                <e-chart
                  id="left3"
                  :options="right2Options"
                  style="padding: 0;text-align: center"
                  width="100%"
                  height="165px" />
              </div>
            </a-card>
          </div>
          <div style="margin-top: 10px">
            <a-card class="card" title="多发地点">
              <a-table
                class="right-table"
                style="margin-top: 14px"
                :columns="rightColumns"
                :data-source="rightData"
                :pagination="false">
                <template slot="progress" slot-scope="progress">
                  <!-- 进度条的插槽 -->
                  <a-progress :stroke-color="{'0%': '#108ee9', '100%': '#87d068'}" :percent="progress.progress">
                    <template #format="percent">
                      <span style="color: white">{{ percent }}%</span>
                    </template>
                  </a-progress>
                </template>
              </a-table>
            </a-card>
          </div>
        </a-col>
      </a-row>
    </div>
    <div style="height: 7px"></div>
  </div>
</template>
<script>
import EChart from '@/components/Echart/EChart'
import * as echarts from 'echarts'
import { Carousel, Progress } from 'ant-design-vue'

export default {
  name: 'Screen',
  components: {
    EChart,
    echarts,
    'a-carousel': Carousel,
    'a-progress': Progress
  },
  data() {
    return {
      left1Options: {
        tooltip: {
          formatter: '{b} : {c}%',
          borderColor: '#2B68A9',
          backgroundColor: '#101d6a',
          textStyle: {
            color: 'white'
          }
        },
        series: [
          {
            name: 'Pressure',
            type: 'gauge',
            center: ['50%', '50%'],
            axisLine: {
              lineStyle: {
                width: 10,
                color: [
                  [0.4, '#ED7237'],
                  [0.6, '#D3DD56'],
                  [1, '#45F8A4']
                ]
              }
            },
            axisLabel: {
              distance: 20,
              fontSize: 15,
              color: 'white'
            },
            pointer: {
              color: '#fffddd',
              length: '75%',
              width: 10,
              itemStyle: {
                color: 'white'
              }
            },
            detail: {
              formatter: '{value}%',
              color: '#59d8ff',
              fontSize: 15,
              offsetCenter: [0, '80%']
            },
            data: [
              {
                value: 70,
                name: '资源占用',
                title: {
                  color: 'white',
                  fontSize: 15,
                  offsetCenter: [0, '65%']
                }
              }
            ]
          }
        ]
      },
      taskCnt: {
        sum: 4,
        run: 3,
        stop: 1
      },
      left2Options: {
        tooltip: {
          trigger: 'item',
          borderColor: '#2B68A9',
          backgroundColor: '#101d6a',
          textStyle: {
            color: 'white'
          },
          formatter: '<div style="text-align: left">{b}<br/>地点：厂房一<br/>占比：{c}%</div>'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          top: 'center',
          textStyle: {
            color: 'white'
          }
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            center: ['65%', '50%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 20,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 20, name: '告警一' },
              { value: 16, name: '告警二' },
              { value: 14, name: '告警三' },
              { value: 7, name: '告警四' },
              { value: 7, name: '告警五' },
              { value: 36, name: '告警六' }
            ]
          }
        ]
      },
      left3Options: {
        grid: {
          top: '20%',
          bottom: '12%',
          left: '15%',
          right: '5%'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: 'white'
            }
          },
          borderColor: '#2B68A9',
          backgroundColor: '#101d6a',
          textStyle: {
            color: 'white'
          }
        },
        legend: {
          data: ['Evaporation', 'Precipitation'],
          textStyle: {
            color: 'white'
          },
        },
        xAxis: [
          {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisLine: {
              lineStyle: {
                color: 'white'
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              formatter: '{value} ml'
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: 'white'
              }
            },
            splitLine: {
              show: false
            }
          }
        ],
        series: [
          {
            name: 'Evaporation',
            type: 'bar',
            tooltip: {
              valueFormatter: function(value) {
                return value + ' ml'
              }
            },
            data: [
              2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
            ]
          },
          {
            name: 'Precipitation',
            type: 'bar',
            tooltip: {
              valueFormatter: function(value) {
                return value + ' ml'
              }
            },
            data: [
              2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
            ]
          }
        ]
      },
      deviceCnt: 10,
      warnCnt: 10,
      detailCnt: 10,
      notDetailCnt: 10,
      columns: [
        {
          title: 'Name',
          dataIndex: 'name',
          key: 'name'
        },
        {
          title: 'Age',
          dataIndex: 'age',
          key: 'age',
          width: 80
        },
        {
          title: 'Address',
          dataIndex: 'address',
          key: 'address 1',
          ellipsis: true
        },
        {
          title: 'Long Column Long Column Long Column',
          dataIndex: 'address',
          key: 'address 2',
          ellipsis: true
        },
        {
          title: 'Long Column Long Column',
          dataIndex: 'address',
          key: 'address 3',
          ellipsis: true
        }
      ],
      data: [
        {
          key: '1',
          name: 'John Brown',
          age: 32,
          address: 'New York No. 1 Lake Park, New York No. 1 Lake Park',
          tags: ['nice', 'developer']
        },
        {
          key: '2',
          name: 'Jim Green',
          age: 42,
          address: 'London No. 2 Lake Park, London No. 2 Lake Park',
          tags: ['loser']
        },
        {
          key: '3',
          name: 'Joe Black',
          age: 32,
          address: 'Sidney No. 1 Lake Park, Sidney No. 1 Lake Park',
          tags: ['cool', 'teacher']
        },
        {
          key: '4',
          name: 'Jim Green',
          age: 42,
          address: 'London No. 2 Lake Park, London No. 2 Lake Park',
          tags: ['loser']
        },
        {
          key: '5',
          name: 'Joe Black',
          age: 32,
          address: 'Sidney No. 1 Lake Park, Sidney No. 1 Lake Park',
          tags: ['cool', 'teacher']
        }
      ],
      time: null,
      right1Options: {
        tooltip: {
          trigger: 'item',
          borderColor: '#2B68A9',
          backgroundColor: '#101d6a',
          textStyle: {
            color: 'white'
          },
          formatter: '<div style="text-align: left">{b}<br/>占比：{c}%</div>'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          top: 'center',
          textStyle: {
            color: 'white'
          }
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            center: ['65%', '50%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 20,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 28, name: '紧急告警' },
              { value: 24, name: '重要告警' },
              { value: 48, name: '普通告警' }
            ]
          }
        ]
      },
      right2Options: {
        grid: {
          top: '20%',
          bottom: '10%',
          left: '0%',
          right: '0%'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: 'white'
            }
          },
          borderColor: '#2B68A9',
          backgroundColor: '#101d6a',
          textStyle: {
            color: 'white'
          }
        },
        legend: {
          data: ['本月', '上月'],
          textStyle: {
            color: 'white'
          }
        },
        xAxis: [
          {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisLine: {
              show: false
            },
            axisLabel: {
              show: false
            },
            axisTick: {
              show: false
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              show: false
            },
            axisLine: {
              show: false
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: 'white'
              }
            }
          }
        ],
        series: [
          {
            name: '本月',
            type: 'line',
            tooltip: {
              valueFormatter: function(value) {
                return value + ' ml'
              }
            },
            data: [
              2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
            ]
          },
          {
            name: '上月',
            type: 'line',
            tooltip: {
              valueFormatter: function(value) {
                return value + ' ml'
              }
            },
            data: [
              2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
            ]
          }
        ]
      },
      currentIndex: 1,
      rightColumns: [
        { title: 'Name', dataIndex: 'name', key: 'name' },
        { title: 'Age', dataIndex: 'age', key: 'age' },
        { title: 'Progress', key: 'progress', scopedSlots: { customRender: 'progress' } }
      ],
      rightData: [
        { key: '1', name: 'John Doe1', age: 28, progress: 50 },
        { key: '2', name: 'Jane Doe2', age: 24, progress: 75 },
        { key: '3', name: 'John Doe3', age: 28, progress: 34 },
        { key: '4', name: 'Jane Doe4', age: 24, progress: 64 },
        { key: '5', name: 'John Doe5', age: 28, progress: 52 }
        // 其他数据
      ]
    }
  },
  mounted() {
    this.updateTime()
    this.timer = setInterval(() => {
      this.updateTime()
      this.currentIndex = (this.currentIndex + 1) % 3
    }, 1000)
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  methods: {
    redirectToHome() {
      this.$router.push('/')
    },
    updateTime() {
      const now = new Date()
      const years = now.getFullYear().toString().padStart(4, '0')
      const months = (now.getMonth() + 1).toString().padStart(2, '0')
      const days = now.getDate().toString().padStart(2, '0')
      const hours = now.getHours().toString().padStart(2, '0')
      const minutes = now.getMinutes().toString().padStart(2, '0')
      const seconds = now.getSeconds().toString().padStart(2, '0')
      this.time = `${years}-${months}-${days} ${hours}:${minutes}:${seconds}`
    }
  }
}
</script>
<style lang='less'>
.contentBg {
  background-image: url("@/assets/images/bg.jpg");
}

.headerBg {
  height: 100px;
  background-image: url("@/assets/images/title.png");
  text-align: center;
  color: white;
}

.title {
  font-size: 52px;
}

.card {
  background: linear-gradient(to bottom, #101d6a, #14489f);
  padding: 0 20px;
  margin-left: 20px;
  color: white;
  border: 3px solid #2B68A9;
  box-shadow: #2B68A9 0 0 10px 0 inset;
  border-radius: 5px;

  .ant-card-head-title {
    color: white;
    padding: 5px 0;
  }

  .ant-card-head {
    border-bottom-color: #283274;
    min-height: 24px;
    padding: 0;
    font-size: 24px;
  }

  .ant-card-body {
    padding: 0 0 10px 0;
  }
}

.rowStyle {
  border: 2px solid #3A5BA8;
  background: linear-gradient(to bottom, #101d6a, #14489f);
  padding: 10px 0;
}

.outCard {
  border: 2px solid #2B68A9;
  background: #101d6a;
  padding: 2px;

  .ant-card-head-title {
    padding: 10px 0 5px 0;
  }

  .ant-card-body {
    padding: 3px;
  }
}

.miniCard {
  border: 2px solid #2B68A9;
  background: linear-gradient(to top right, #101d6a, #14489f, #101d6a);
  text-align: center;

  .ant-card-head {
    border-bottom: none;
    min-height: 24px;
    text-align: center;
  }

  .ant-card-head-title {
    color: #59d8ff;
    font-size: 20px;
    padding: 5px 0;
  }

  .ant-card-body {
    text-align: center;
    place-items: center;
    display: grid
  }
}

.split {
  height: 2px;
  width: 120px;
  background: linear-gradient(to right, rgba(89, 216, 255, 0), rgba(89, 216, 255, 1), rgba(89, 216, 255, 0));
}

.midDownCard {
  height: 280px;
  border: 3px solid #2B68A9;
  background: linear-gradient(to bottom, #101d6a, #14489f);
  margin-top: 16px;

  .ant-card-body {
    padding: 24px 24px 0 24px;
  }
}

.ant-carousel {
  .slick-slide {
    text-align: center;
    height: 250px;
    overflow: hidden;
  }

  .slick-slide {
    color: #fff;
    margin-bottom: -15px;
  }
}

.custom-table {

  .ant-table-thead {
    color: #17327f;
  }

  .ant-table-thead th,
  .ant-table-tbody td {
    font-size: 16px;
    color: white;
  }

  .ant-table-thead > tr > th {
    background: #17327f;
    border-bottom: none;
    padding: 5px;
  }

  .ant-table-tbody > tr > td {
    border-bottom: 1px solid #283274;
    padding: 5px;
  }
}

.titleCard {
  border: 2px solid #2B68A9;
  background: linear-gradient(to right, #14489f, #101d6a, #14489f);

  .ant-card-body {
    text-align: center;
    font-size: 20px;
    color: white;
    padding-top: 5px;
    padding-bottom: 5px;
  }
}

.timeCard {
  border: 2px solid #2B68A9;
  background: #101d6a;
  padding: 2px;
  border-radius: 5px;

  .ant-card-body {
    padding: 3px;
    text-align: center;
    font-size: 24px;
    color: #59d8ff;
  }
}

.custom-button {
  border: 2px solid #2B68A9;
  background: linear-gradient(to top right, #14489f, #101d6a, #14489f);
  width: 100%;
  height: 50px;
  font-size: 20px;
  color: #59d8ff;
}

.right-table {

  .ant-table-thead {
    color: #17327f;
  }

  .ant-table-thead th,
  .ant-table-tbody td {
    font-size: 16px;
    color: white;
  }

  .ant-table-thead > tr > th {
    background: #17327f;
    border-bottom: none;
    padding: 5px;
  }

  .ant-table-tbody > tr > td {
    border-bottom: 1px solid #283274;
    padding: 8px;
  }
}

</style>
